<template>
  <h2>计数器1：{{ data.counter1 }}</h2>
  <button @click="data.counter1++">计数器加1</button>
  <hr>
  <h2>计数器2：{{ data.x }}</h2>
  <button @click="data.x.counter2++">计数器加1</button>
  <hr>
  <button @click="getRawObject">获取data的原始对象</button>
  <br><br>
  <button @click="addX">给data扩展一个x属性</button>
</template>

<script>


/*
  toRaw 与 markRaw

  1.toRaw：将响应式对象转换为普通对象。只适用于reactive生成的响应式对象

  2.markRaw：标记某个对象，让这个对象永远都不具备响应式。比如集成一些第三方库的时候，比如有一个巨大的只读列表，不让其具备响应式是一种性能优化

  区别：https://blog.csdn.net/m0_72030584/article/details/145033498
*/

import { reactive, toRaw, markRaw } from 'vue'
export default {
  name: 'App',
  setup() {
    // data 
    // data是具备响应式的。
    let data = reactive({
      counter1: 1
    })

    // 获取data这个响应式对象的原始对象
    // 操作原始对象的时候，没有响应式处理的。
    function getRawObject() {
      // rawObj就是一个原始对象，是data的原始对象
      let rawObj = toRaw(data)
      // 修改原始对象，不会具有响应式
      rawObj.counter1++
      console.log('原始对象', rawObj)
    }

    // 给data扩展一个x属性。
    function addX() {
      // 给data扩展一个x属性
      data.x = markRaw({ counter2: 100 })
    }

    // 返回一个对象
    return { data, getRawObject, addX }
  }
}
</script>